import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { notification,  message, Modal, Button, Table,Tabs, Input, Select, Row, Col } from 'antd'
import {
  fetchUserSortList,
  updateUserListQuery,
  resetUserListQuery,
  fetchUserDelete,
  fetchUserDetail,
  fetchHouseRole,
  fetchUserList} from 'actions/manage'
import Panel from 'components/panel'
import Gform from 'components/gForm'
import TypeList from './manageType/typeList'
import TreeList from './manageType/treeList'
import PoliceAddModal from './modal/policeAdd'
import RoleSelect from './modal/roleSelect'
import './style.css'

message.config({
  top: '40%',
})
//连接公用常量、后端返回的数据方法  并放置在props里面调用
@connect(
  (state, props) => ({
    config: state.config,
    userSortResult: state.userSortResult,
    userListResult: state.userListResult,
    amList: state.amList,
  })
)

// 声明组件  并对外输出
export default class userManage extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props) {
    super(props)
    this.state = {
      activeTab: 'list',
      deptcode: '',
      PoliceAddVisible: false,
      RoleVisible: false,
      list: [
        {
          id: 2,
          username: '叶寒冰',
          post: `省公安厅副厅长<br/>市委常委、公安局长`,
          usercode: '33010001',
          userpwd: 123,
          longmobile: '1300366666',
          shortmobile: '130',
          role: [
            {roleid: '001', rolename: "jxj不要改"}
          ]
        },
        {
          id: 6,
          username: '边卫跃',
          post: '党委副书记、常务副局长',
          usercode: '33016001',
          role: [
            {roleid: '001', rolename: "jxj不要改"},
            {roleid: '002', rolename: "通用角色"},
            {roleid: '003', rolename: "橘色角"},
          ]
        }
      ],
      trees: [
        {
          deptcode: '000', deptname: '杭州市公安局', children: [
          {deptcode: '000001', deptname: '局领导'},
          {
            deptcode: '000010', deptname: '驻局纪检组', children: [
            {deptcode: '000010000', deptname: '负责人'},
            {deptcode: '000010002', deptname: '委室领导'},
            {deptcode: '000010006', deptname: '综合组'},
            {deptcode: '000010007', deptname: '执纪组'},
          ]
          },
          {
            deptcode: '000002', deptname: '办公室', children: [
            {deptcode: '000002000', deptname: '负责人'},
            {deptcode: '000002001', deptname: '处领导'},
            {deptcode: '000002010', deptname: '警务合作处'},
            {deptcode: '000002002', deptname: '机要室'},
          ]
          },
        ]
        },
      ]
    }
    this._handleSubmit = this._handleSubmit.bind(this)
    this.onSelect = this.onSelect.bind(this)
    this.policeAdd = this.policeAdd.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
    this.handleUserInfo = this.handleUserInfo.bind(this)
    this.handleUserRole = this.handleUserRole.bind(this)
    this.handleOkRole = this.handleOkRole.bind(this)
    this.handleCancelRole = this.handleCancelRole.bind(this)
  }

  // 组件已经加载到dom中
  componentDidMount() {
    this.props.dispatch(fetchUserSortList())
  }

  handleDelete(id) {
    console.log('DeleteId:', id)
    this.props.dispatch(fetchUserDelete({payload: id}))
    //return state.filter(item => item.id !== id)
  }

  handleUserInfo(usercode) {
    console.log('checkedusercode:', usercode)
    this.props.dispatch(fetchUserDetail(usercode))
    this.setState({PoliceAddVisible: true})
  }

  handleUserRole(usercode) {
    console.log('checkedusercode:', usercode)
    this.props.dispatch(fetchHouseRole(usercode))
    this.setState({RoleVisible: true})
  }

  // 点击搜索按钮的回调事件
  _handleSubmit(query) {
    this.props.dispatch(fetchUserList({...query}))
  }


  gFormConfig() {
    const { config } = this.props
    return []
  }

  gFormSubmit(query) {
    console.log(query)
  }

  //点击树节点的时候获取 当前部门 deptcode
  onSelect(query) {
    console.log("click", query)
    this.setState({deptcode: query})
    this.props.dispatch(fetchUserList({query}))

  }

  //点击新增人员的时候判断部门 deptcode  是否存在，有则弹窗新增
  policeAdd() {
    if (this.state.deptcode) {
      console.log('deptcode', this.state.deptcode)
      this.setState({PoliceAddVisible: true})
    }
    else {
      console.log('deptcode:null')
      notification.error({
        message: '错误',
        description: '请先选择部门'
      });
    }
  }

  //form 表单保存后调用
  handleOk(query) {
    this.setState({PoliceAddVisible: query})
    message.success('操作成功')
  }

  handleCancel() {
    this.setState({PoliceAddVisible: false})
  }

  handleOkRole(query) {
    console.log('check:', query)
    this.setState({RoleVisible: false})
    this.props.dispatch(fetchUserList({query}))
    message.success('操作成功')
  }

  handleCancelRole() {
    this.setState({RoleVisible: false})
  }

  render() {
    const {
      userListResult,
      } = this.props
    // 暂时用假数据来模拟列表项
    if (true) {
    }
    return (
      <Panel>
        <Row gutter={16}>
          <Col span="5" className="treeside">
            <TreeList
              trees={this.state.trees}
              onSelect={this.onSelect}
            />
          </Col>
          <Col span="19">
            <Gform gFormConfig={this.gFormConfig()} gFormSubmit={this.gFormSubmit}/>
            <Button type="primary" size="small" onClick={this.policeAdd}> 新增人员</Button>
            <div className="list-tab">
              <TypeList
                //columns={this.columns()}
                dataSource={this.state.list}
                //scroll={{x: 1100}}
                loading={userListResult.loading}
                onDelete={this.handleDelete}
                onUserInfo={this.handleUserInfo}
                onUserRole={this.handleUserRole}
              />
            </div>
          </Col>
        </Row>
        <Modal
          visible={this.state.PoliceAddVisible}
          title="新增警员"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={['']}
        >
          <PoliceAddModal handleOk={this.handleOk}></PoliceAddModal>
        </Modal>

        <Modal
          visible={this.state.RoleVisible}
          title="修改角色类别"
          onOk={this.handleOkRole}
          onCancel={this.handleCancelRole}
          footer={['']}
        >
          <RoleSelect handleOkRole={this.handleOkRole}></RoleSelect>
        </Modal>

      </Panel>
    )
  }
}
